<div ng-controller="goodsDetailPicturesCtrl">
    <div class="bg-light lter b-b wrapper-md ng-scope">
        <h4 class="m-n font-thin">商品管理</h4>
        <button ui-sref="app.goodsEdit({id:goodsId})" class="btn-back btn btn-dark btn-sm btn-rounded">
            返回
        </button>
    </div>

    <div class="wrapper-md">
        <div class="panel panel-default panel-body">
            <div class="goods_header_container">
                <div class="goods_header_item goods_header_item_active">
                    <span class="goods_header_item_span">商品基本信息</span>
                    <div class="tran-right"></div>
                </div>
                <div class="goods_header_item goods_header_item_active">
                    <div class="tran-left"></div>
                    <span class="goods_header_item_span">商品图片信息</span>
                </div>
            </div>
            <div class="bg-light panel-body">
                <div class="m-b-xs">
                    <p class="m-n h4 font-bold">商品图片信息</p>
                </div>
                <span class="h6 block m-b-sm">
                    <span class="block inline">商品封面图片,轮播图片,推荐图片信息</span>
                    <i class="m-t-sm m-l-xs inline fa fa-question-circle text-muted h6"  popover-placement="top" popover="请展开查看图片要求" popover-trigger="mouseenter" ng-init="showCommand=false;"></i>
                </span>
                <div>
                    <span class="h6 block m-b-sm">a. 没有添加图片的商品将无法被搜索到</span>
                    <span class="h6 block m-b-sm">b. 尺寸宽高需均大于480px</span>
                    <span class="h6 block m-b-sm">c. 大小1M以内</span>
                    <span class="h6 block m-b-sm">d. 商品详情图数量限制在10张以内</span>
                    <span class="h6 block m-b-sm">e. 主轮播图背景为纯白色（服饰除外）,图片上不添加任何文字</span>
                    <span class="h6 block m-b-sm">f. 批量上传时，图片须等宽高且不小于480px</span>
                </div>
            </div>
            <div class="panel-body b-b">
                <div>
                    <div class="col-md-1 text-right no-padder">
                        <span>图片封面:</span>
                    </div>
                    <div class="col-md-11">
                        <div>
                            <div class="panel panel-default">
                                <div class="panel-body bg-white" ng-controller="goodsFileUploadCtrl"  nv-file-drop="" uploader="uploader" filters="picFilter" ng-init="init(1,0)">
                                    <div class="pu-container">
                                        <!--已保存上传的-->
                                        <div class="pu-item-con" ng-repeat="item in goodsImages">
                                            <div class="pu-item">
                                                <div class="pu-pic" ng-click="openUrl(app.image.goods+item.fileName)">
                                                    <span class="fa fa-plus pu-fa"></span>
                                                    <img ng-src="{{app.image.goods}}{{item.fileName}}" err-src="img/error.png" class="pu-picture-pre-view"/>
                                                </div>
                                                <div class="block">
                                                    <div>
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="deleteGoodsImage(item.id)">删除图片</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 需要保存上传的 -->
                                        <div class="pu-item-con" ng-repeat="item in uploader.queue">
                                            <div class="pu-item" ng-init="item.type=0">
                                                <div class="pu-pic" ng-click="openUrl(item.imgsrc)">
                                                    <span class="fa fa-plus pu-fa" ng-if="!item.isSuccess"></span>
                                                    <img ng-src="{{item.imgsrc}}" err-src="img/error.png" class="pu-picture-pre-view" ng-if="item.isSuccess"/>
                                                </div>
                                                <div class="block m-b-sm">
                                                    <div ng-if="item.isSuccess">
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="del(item)">图片移除</button>
                                                    </div>
                                                    <div ng-if="item.isError">
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="delError(item)">图片移除</button>
                                                    </div>
                                                </div>

                                                <div class="pu-process m-b-n">
                                                    <div class="progress bg-light m-b-n" ng-if="!item.isError">
                                                        <div class="progress-bar progress-bar-striped bg-success active" role="progressbar" ng-style="{ 'width': item.progress + '%' }" style="width: 100%;">{{item.progress}}%</div>
                                                    </div>

                                                    <div class="progress bg-light m-b-n" ng-if="item.isError">
                                                        <div class="progress-bar progress-bar-striped bg-danger active" role="progressbar" style="width: 100%;">上传失败</div>
                                                    </div>

                                                </div>


                                            </div>
                                        </div>
                                        <!-- 添加图片控件 -->
                                        <div class="pu-item-con" ng-if="(queueLimit>uploader.queue.length)">
                                            <div class="pu-item w-md">
                                                <div class="pu-pic">
                                                    <span class="fa fa-plus pu-fa"></span>
                                                </div>
                                                <div class="block">
                                                    <div class="pos-rlt">
                                                        <button class="btn btn-sm btn-block btn-info">点击选择图片</button>
                                                        <input type="file" ng-model="file" class="pu-file" nv-file-select="" multiple required uploader="uploader" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
                <div>
                    <div class="col-md-1 text-right no-padder">
                        <span>图片轮播图:</span>
                    </div>
                    <div class="col-md-11">
                        <div>
                            <div class="panel panel-default">
                                <div class="panel-body bg-white" ng-controller="goodsFileUploadCtrl"  nv-file-drop="" uploader="uploader" filters="picFilter" ng-init="init(5,1)">
                                    <div class="pu-container">

                                        <!--已保存上传的-->
                                        <div class="pu-item-con" ng-repeat="item in goodsImages">
                                            <div class="pu-item">
                                                <div class="pu-pic" ng-click="openUrl(app.image.goods+item.fileName)">
                                                    <span class="fa fa-plus pu-fa"></span>
                                                    <img ng-src="{{app.image.goods}}{{item.fileName}}" err-src="img/error.png" class="pu-picture-pre-view"/>
                                                </div>
                                                <div class="block">
                                                    <div>
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="deleteGoodsImage(item.id)">删除图片</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 需要保存上传的 -->
                                        <div class="pu-item-con" ng-repeat="item in uploader.queue">
                                            <div class="pu-item" ng-init="item.type=1">
                                                <div class="pu-pic" ng-click="openUrl(item.imgsrc)">
                                                    <span class="fa fa-plus pu-fa" ng-if="!item.isSuccess"></span>
                                                    <img ng-src="{{item.imgsrc}}" err-src="img/error.png" class="pu-picture-pre-view" ng-if="item.isSuccess"/>
                                                </div>
                                                <div class="block m-b-sm">
                                                    <div ng-if="item.isSuccess">
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="del(item)">图片移除</button>
                                                    </div>
                                                    <div ng-if="item.isError">
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="delError(item)">图片移除</button>
                                                    </div>
                                                </div>

                                                <div class="pu-process m-b-n">
                                                    <div class="progress bg-light m-b-n" ng-if="!item.isError">
                                                        <div class="progress-bar progress-bar-striped bg-success active" role="progressbar" ng-style="{ 'width': item.progress + '%' }" style="width: 100%;">{{item.progress}}%</div>
                                                    </div>

                                                    <div class="progress bg-light m-b-n" ng-if="item.isError">
                                                        <div class="progress-bar progress-bar-striped bg-danger active" role="progressbar" style="width: 100%;">上传失败</div>
                                                    </div>

                                                </div>


                                            </div>
                                        </div>

                                        <!-- 添加图片控件 -->
                                        <div class="pu-item-con" ng-if="(queueLimit>uploader.queue.length)">
                                            <div class="pu-item w-md">
                                                <div class="pu-pic">
                                                    <span class="fa fa-plus pu-fa"></span>
                                                </div>
                                                <div class="block">
                                                    <div class="pos-rlt">
                                                        <button class="btn btn-sm btn-block btn-info">点击选择图片</button>
                                                        <input type="file" ng-model="file" class="pu-file" nv-file-select="" multiple uploader="uploader" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
                <div>
                    <div class="col-md-1 text-right no-padder">
                        <span>图片详情图:</span>
                    </div>
                    <div class="col-md-11">
                        <div>
                            <div class="panel panel-default">
                                <div class="panel-body bg-white" ng-controller="goodsFileUploadCtrl"  nv-file-drop="" uploader="uploader" filters="picFilter" ng-init="init(100,2)">
                                    <div class="pu-container">

                                        <!--已保存上传的-->
                                        <div class="pu-item-con" ng-repeat="item in goodsImages">
                                            <div class="pu-item">
                                                <div class="pu-pic" ng-click="openUrl(app.image.goods+item.fileName)">
                                                    <span class="fa fa-plus pu-fa"></span>
                                                    <img ng-src="{{app.image.goods}}{{item.fileName}}" err-src="img/error.png" class="pu-picture-pre-view"/>
                                                </div>
                                                <div class="block">
                                                    <div>
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="deleteGoodsImage(item.id)">删除图片</button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <!-- 需要保存上传的 -->
                                        <div class="pu-item-con" ng-repeat="item in uploader.queue">
                                            <div class="pu-item" ng-init="item.type=2">
                                                <div class="pu-pic" ng-click="openUrl(item.imgsrc)">
                                                    <span class="fa fa-plus pu-fa" ng-if="!item.isSuccess"></span>
                                                    <img ng-src="{{item.imgsrc}}" err-src="img/error.png" class="pu-picture-pre-view" ng-if="item.isSuccess"/>
                                                </div>
                                                <div class="block m-b-sm">
                                                    <div ng-if="item.isSuccess">
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="del(item)">图片移除</button>
                                                    </div>
                                                    <div ng-if="item.isError">
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="delError(item)">图片移除</button>
                                                    </div>
                                                </div>

                                                <div class="pu-process m-b-n">
                                                    <div class="progress bg-light m-b-n" ng-if="!item.isError">
                                                        <div class="progress-bar progress-bar-striped bg-success active" role="progressbar" ng-style="{ 'width': item.progress + '%' }" style="width: 100%;">{{item.progress}}%</div>
                                                    </div>

                                                    <div class="progress bg-light m-b-n" ng-if="item.isError">
                                                        <div class="progress-bar progress-bar-striped bg-danger active" role="progressbar" style="width: 100%;">上传失败</div>
                                                    </div>

                                                </div>


                                            </div>
                                        </div>
                                        <!-- 添加图片控件 -->
                                        <div class="pu-item-con" ng-if="(queueLimit>uploader.queue.length)">
                                            <div class="pu-item w-md">
                                                <div class="pu-pic">
                                                    <span class="fa fa-plus pu-fa"></span>
                                                </div>
                                                <div class="block">
                                                    <div class="pos-rlt">
                                                        <button class="btn btn-sm btn-block btn-info">点击选择图片</button>
                                                        <input type="file" ng-model="file" class="pu-file" nv-file-select="" multiple uploader="uploader" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
                <div>
                    <div class="col-md-1 text-right no-padder">
                        <span>图片推荐图:</span>
                    </div>
                    <div class="col-md-11">
                        <div>
                            <div class="panel panel-default">
                                <div class="panel-body bg-white" ng-controller="goodsFileUploadCtrl"  nv-file-drop="" uploader="uploader" filters="picFilter" ng-init="init(1,3)">
                                    <div class="pu-container">

                                        <!--已保存上传的-->
                                        <div class="pu-item-con" ng-repeat="item in goodsImages">
                                            <div class="pu-item">
                                                <div class="pu-pic" ng-click="openUrl(app.image.goods+item.fileName)">
                                                    <span class="fa fa-plus pu-fa"></span>
                                                    <img ng-src="{{app.image.goods}}{{item.fileName}}" err-src="img/error.png" class="pu-picture-pre-view"/>
                                                </div>
                                                <div class="block">
                                                    <div>
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="deleteGoodsImage(item.id)">删除图片</button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <!-- 需要保存上传的 -->
                                        <div class="pu-item-con" ng-repeat="item in uploader.queue">
                                            <div class="pu-item" ng-init="item.type=3">
                                                <div class="pu-pic" ng-click="openUrl(item.imgsrc)">
                                                    <span class="fa fa-plus pu-fa" ng-if="!item.isSuccess"></span>
                                                    <img ng-src="{{item.imgsrc}}" err-src="img/error.png" class="pu-picture-pre-view" ng-if="item.isSuccess"/>
                                                </div>
                                                <div class="block m-b-sm">
                                                    <div ng-if="item.isSuccess">
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="del(item)">图片移除</button>
                                                    </div>
                                                    <div ng-if="item.isError">
                                                        <button class="btn btn-sm btn-block btn-danger" ng-click="delError(item)">图片移除</button>
                                                    </div>
                                                </div>

                                                <div class="pu-process m-b-n">
                                                    <div class="progress bg-light m-b-n" ng-if="!item.isError">
                                                        <div class="progress-bar progress-bar-striped bg-success active" role="progressbar" ng-style="{ 'width': item.progress + '%' }" style="width: 100%;">{{item.progress}}%</div>
                                                    </div>

                                                    <div class="progress bg-light m-b-n" ng-if="item.isError">
                                                        <div class="progress-bar progress-bar-striped bg-danger active" role="progressbar" style="width: 100%;">上传失败</div>
                                                    </div>

                                                </div>


                                            </div>
                                        </div>
                                        <!-- 添加图片控件 -->
                                        <div class="pu-item-con" ng-if="(queueLimit>uploader.queue.length)">
                                            <div class="pu-item w-md">
                                                <div class="pu-pic">
                                                    <span class="fa fa-plus pu-fa"></span>
                                                </div>
                                                <div class="block">
                                                    <div class="pos-rlt">
                                                        <button class="btn btn-sm btn-block btn-info">点击选择图片</button>
                                                        <input type="file" ng-model="file" class="pu-file" nv-file-select="" multiple uploader="uploader" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="text-right">
                    <button ng-click="add()" class="btn btn-success" ng-if="!addState">图片保存</button>
                    <div class="btn btn-success" ng-if="addState" disabled>保存中..</div>
                </div>
            </div>
        </div>
    </div>

</div>




